import {reactive, ref, toRefs, getCurrentInstance, watch,shallowRef} from "vue"
import OSS from 'ali-oss';
/**
 * 富文本编辑器
*/
export default function () {
    const {proxy} = getCurrentInstance()

    const editorRef = shallowRef() // 编辑器实例，必须用 shallowRef
    const editorHtml = ref("") // 内容 HTML
    const editorToolbarConfig = {
        excludeKeys: [
            // 排除不需要的菜单
            "insertLink",
            "insertImage",
            "editImage",
            "viewImageLink",
            "insertVideo",
            "uploadVideo",
            "editVideoSize",
            "emotion",
        ],
    }
    const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} }
    const handleEditorCreated = (editor) => {
        editorRef.value = editor // 记录 editor 实例，重要！
    }
    editorConfig.MENU_CONF["uploadImage"] = {
        // 自定义上传
        async customUpload(file, insertFn) {
            proxy.$ossUpload.put(file).then(res=>{
                // console.log(res)
                // res.res.statusCode
                if(res.res.statusCode){
                    // res.name
                    insertFn(proxy.imgUrl + res.url) // 最后插入图片 insertFn(url, alt, href)，alt：描述，href:链接，后面非必填
                }else{
                    proxy.$message({
                        message:res.msg,
                        type: "error"
                    })
                }
            })
        }
    }
    return {
        editorRef,editorHtml,editorConfig,editorToolbarConfig,handleEditorCreated
    }
}
